<template>

<el-row>
    <el-col :span="6">
        <el-input v-model="formRole" />
        <el-button type="primary" @click="addRole()">添加角色</el-button>
        <el-table ref="tableRef" row-key="id" @cell-click="roleClick" :highlight-current-row="true" :data="roleData" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="角色名"/>
        </el-table>
        </el-col>

        <el-col :span="18">
        <el-tabs type="border-card">
    <el-tab-pane label="操作权限">
        <el-tree
            ref="treeRef"
              :data="aclData"
              show-checkbox
              :props="defaultProps"
              @check-change="aclChange"
              node-key="id"
              >
              <template #default="{ node, data }">
                  <span class="custom-tree-node">
                  <span>{{ node.label }}</span>
                  
                  <!-- <span v-if="data.module==true">
                    <a @click="addAcl(data)"> 添加权限 </a>
                  </span> -->
                  </span>
              </template>
              </el-tree>
    </el-tab-pane>
    <el-tab-pane label="数据权限">
        <el-radio-group v-model="roleScope" @change="scopeChange">
            <el-radio label="1" size="large">个人：可操作个人及下属数据</el-radio>
            <el-radio label="2" size="large">所属部门：可操作个人，下属及所属部门的数据</el-radio>
            <el-radio label="3" size="large">全部：可操作所有数据</el-radio>
        </el-radio-group>
    </el-tab-pane>
    <el-tab-pane label="字段权限">
        <div>
            <el-collapse v-model="activeNames">
                <el-collapse-item v-for='(viewItem, i) in viewData' :title='viewItem.name' :name='viewItem.name'>
                    <el-table :data="viewItem.children" style="width: 100%">
                        <el-table-column label='字段名' prop='name' width="180"></el-table-column>
                        <el-table-column label='不可见' width="180">
                            <template #default="scope">
                                <el-checkbox v-if='scope.row.isVisible' v-model='checkVBoxData[viewItem.name][scope.row.fieldName]' label="不可见" size="large" @change='checkBoxChange(scope.row, 1, checkVBoxData[viewItem.name][scope.row.fieldName])'/>
                            </template>
                        </el-table-column>
                        <el-table-column label='不可编辑' width="180">
                            <template #default="scope">
                                <el-checkbox v-if='scope.row.isEditable' :disabled='checkVBoxData[viewItem.name][scope.row.fieldName]' v-model='checkEBoxData[viewItem.name][scope.row.fieldName]'  label="不可编辑" size="large" @change='checkBoxChange(scope.row, 2, checkEBoxData[viewItem.name][scope.row.fieldName])'/>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
            </el-collapse>
        </div>
    </el-tab-pane>
  </el-tabs>
    </el-col>
</el-row>



</template>

<script setup>
import { ref, onMounted } from 'vue'
import httpRequest from '@/request/index'
// import Acl from '../components/Acl.vue';


const activeNames = ref(['1'])
const roleData = ref([])
const curRole = ref()
const viewData = ref([])
const checkVBoxData = ref([])
const checkEBoxData = ref([])
const viewNameList = []
const roleScope = ref('0')
const aclData = ref([])
const formRole = ref('')
const treeRef = ref();

function addRole() {
  httpRequest({
        url: '/auth/role/add',
        method: 'post',
        data: {
          roleName: formRole.value,
        }
    }).then((res) => {
        if (res.code === 0) {
         loadRoleData()
        }
    })
}

function checkBoxChange(row, aclType, use) {

    if (curRole.value == null) {
        return
    }

    httpRequest({
        url: '/auth/role/field',
        method: 'post',
        data: {
            roleId: curRole.value.id,
            fieldId: row.id,
            aclType: aclType,
            use: use
        }
    }).then((res) => {
        if (res.code === 0) {
            loadRoleField()
        }
    })

}

function scopeChange() {

    if (curRole.value == null) {
        return
    }

    httpRequest({
        url: '/auth/role/scope',
        method: 'post',
        data: {
            roleId: curRole.value.id,
            scope: roleScope.value
        }
    }).then((res) => {
        if (res.code === 0) {
            
        }
    })
}

onMounted(() => {
    loadData()
})

function loadData() {
    loadRoleData()
    loadView()
    loadAclData()
}

function aclChange() {
    httpRequest({
        url: '/auth/role/acl',
        method: 'post',
        data: {
          roleId: curRole.value.id,
          aclId: treeRef.value.getCheckedKeys()
        }
    }).then((res) => {
        if (res.code === 0) {
         loadRoleAcl()
        }
    })
}

function loadRoleData() {
  httpRequest({
        url: '/auth/role/all',
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
            roleData.value = res.data
        }
    })
}

function loadRoleAcl() {
  httpRequest({
        url: '/auth/role/acl?roleId=' + curRole.value.id,
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
          treeRef.value.setCheckedKeys(res.data)
        }
    })
}

function loadRoleScope() {
  httpRequest({
        url: '/auth/role/scope?roleId='+curRole.value.id,
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
            console.log(res.data.scope)
            roleScope.value = res.data.scope + ''
        }
    })
}

function loadRoleField() {
  httpRequest({
        url: '/auth/role/field?roleId=' + curRole.value.id,
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
            let map = {}
            let mapE = {}
            for(let i = 0; i < viewNameList.length; i++) {
                map[viewNameList[i]] = {}
                mapE[viewNameList[i]] = {}
            }

            for (let i in res.data) {
                let viewName = res.data[i].viewName
                let fieldName = res.data[i].fieldName
                if (res.data[i].aclType == 1) {
                    map[viewName][fieldName] = true
                } else {
                    mapE[viewName][fieldName] = true
                }
            }

            checkVBoxData.value = map
            checkEBoxData.value = mapE
        }
    })
}

function loadView() {
    httpRequest({
        url: '/auth/view',
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
            
            let map = {}
            let mapE = {}
            for(let i in res.data) {
                map[res.data[i].name] = {}
                mapE[res.data[i].name] = {}
                viewNameList.push(res.data[i].name)
            }

            checkVBoxData.value = map
            checkEBoxData.value = mapE
            viewData.value = res.data
        }

        
    })
}

function loadAclData() {
  httpRequest({
        url: '/auth/acl/all',
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
          aclData.value = res.data
        }
    })
}

function roleClick(currentRow) {
  curRole.value = currentRow
  loadRoleAcl()
  loadRoleField()
  loadRoleScope()
}

const defaultProps = {
  children: 'children',
  label: 'name',
}


</script>